import React, { Component } from "react";
import Header from "./components/Header";
import Footer from "./components/Footer";
import List from "./components/List";
import "./App.css";

export default class App extends Component {
  //初始化状态
  state = {
    todos: [
      { id: 1, name: "吃饭", done: true },
      { id: 2, name: "睡觉", done: true },
      { id: 3, name: "打代码", done: false },
      { id: 4, name: "逛街", done: false },
    ],
  };
  //addTodo用于添加一个todo，接收的参数时todo对象
  addTodo = (todoObj)=>{
    const {todos} = this.state
    const newTodos = [todoObj,...todos]
    this.setState({todos:newTodos})
  }
  //updateTodo用于更新一个todo对象
  updateTodo = (id,done)=>{
    //获取状态中的todos
    const {todos} = this.state
    //匹配处理数据
    const newTodos = todos.map(todoObj=>{
      if(todoObj.id === id) return {...todoObj,done}
      else return todoObj
    })
    this.setState({todos:newTodos})
  }
  //deleteTodo用于删除一个todo对象
  deleteTodo = (id)=>{
    const {todos} = this.state 
    const newTodos = todos.filter(todoObj=>{
      return todoObj.id !== id
    })
    this.setState({todos:newTodos})
  }
  //updateCheckAllDone用于全选
  updateCheckAllDone = (done)=>{
    const {todos} = this.state
    const newTodos = todos.map((todoObj)=>{
      return {...todoObj,done}
    })
    this.setState({todos:newTodos})
  }
  //clearAllDone用于清除所有已完成的
  clearAllDone = ()=>{
    const {todos} = this.state
    const newTodos = todos.filter((todoObj)=>{
      return !todoObj.done
    })
    this.setState({todos: newTodos})
  }
  render() {
    const {todos} = this.state
    return (
      <div className="todo-container">
        <div className="todo-wrap">
          <Header addTodo={this.addTodo}/>
          <List todos={todos} updateTodo={this.updateTodo} deleteTodo={this.deleteTodo}/>
          <Footer todos={todos} updateCheckAllDone={this.updateCheckAllDone} clearAllDone={this.clearAllDone}/>
        </div>
      </div>
    );
  }
}
